<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/developer"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ (projectData$ | async)?.name || '' }}</ion-title>
    <ion-buttons slot="end">
      <ion-button routerLink="manifest">View Manifest</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item
    *ngIf="projectData$ | async as projectData"
    button
    (click)="openBasicInfoModal(projectData)"
  >
    <ion-icon slot="start" name="information-circle-outline"></ion-icon>
    <ion-label>
      <h2>Basic Info</h2>
      <p>Complete basic info for your package</p>
    </ion-label>
    <ion-icon
      slot="end"
      color="success"
      name="checkmark"
      *ngIf="!(projectData['basic-info'] | empty)"
    ></ion-icon>
    <ion-icon
      slot="end"
      color="warning"
      name="remove-outline"
      *ngIf="projectData['basic-info'] | empty"
    ></ion-icon>
  </ion-item>
  <ion-item button detail routerLink="instructions" routerDirection="forward">
    <ion-icon slot="start" name="list-outline"></ion-icon>
    <ion-label>
      <h2>Instructions Generator</h2>
      <p>Create instructions and see how they will appear to the end user</p>
    </ion-label>
  </ion-item>
  <ion-item button detail routerLink="config">
    <ion-icon slot="start" name="construct-outline"></ion-icon>
    <ion-label>
      <h2>Config Generator</h2>
      <p>Edit the config with YAML and see it in real time</p>
    </ion-label>
  </ion-item>
</ion-content>
